import { useState } from "react";
import { Radio, Upload, Switch } from "antd";
import { PlusCircleOutlined } from "@ant-design/icons";
import { WorkWeek, TextArea } from "@/components/func";
import {
  AttributeDescProps,
  OnOffDesc,
  PhoneView,
  UploadButton,
} from "@/components/render";
import { getBase64 } from "@/assets/js/common";

interface props {
  welcomeType: number; // 欢迎语类型
  cronWelcomeEnable: boolean; // 是否分时段欢迎语
  setCronWelcomeEnable: any; // 设置是否分时段欢迎语
}

let welcomeMesTime: any = [
  {
    id: 1,
    time: [],
    week: [],
    text: "",
    img: "",
  },
];

let id: number = 1;

const WelcomeSetTime = ({
  welcomeType,
  cronWelcomeEnable,
  setCronWelcomeEnable,
}: props) => {
  const [messageType, setMessageType] = useState(1);
  const [loading, setLading] = useState(false);
  const [, setRender] = useState(0);

  // 添加自动上下线
  const addAutoWork = () => {
    id = welcomeMesTime[welcomeMesTime.length - 1].id + 1;
    let newTime = {
      id,
      time: [],
      week: [],
      text: "",
      img: "",
    };
    welcomeMesTime.push(newTime);
    setRender(Math.random() + 1);
  };

  return (
    <div className={`max-w-1230 ${welcomeType === 1 ? "" : "none"}`}>
      <div className="flex items-center justify-start mb-22">
        <span className="mx-5 min-w-105 text-right">分时段欢迎语：</span>
        {/* 开关 */}
        <div className="flex items-center">
          <Switch
            size="small"
            onChange={e => {
              setCronWelcomeEnable(e);
            }}
            checked={cronWelcomeEnable}
          />
          <OnOffDesc flag={cronWelcomeEnable} />
        </div>
      </div>

      {/* 说明 */}
      <div className={`w-634 h-72 mb-16 ml-110 ${cronWelcomeEnable ? "" : "none"}`}>
        <AttributeDescProps
          attribute="分时段欢迎语："
          desc={[
            "1、员工上下班不同时间段可设置不同欢迎语；",
            " 2、分时段之外的时间将发送渠道欢迎语。",
          ]}
        />
      </div>

      {cronWelcomeEnable &&
        welcomeMesTime.map((item: any, index: number) => {
          return (
            <div className="flex items-start mb-24 pl-50" key={item.id}>
              <div className="flex-1 relative flex items-start mr-46">
                <span className="w-52 mr-12">时段{index + 1}：</span>
                <div className="bg-grey-fbfbfb border-1 border-solid border-grey-200 rounded-sm flex-1 min-w-580 p-20 pr-0">
                  {/* 工作周期 */}
                  <div>
                    <WorkWeek
                      id="week2"
                      setWeek={(e: any) => {
                        item.week = e;
                      }}
                      setTime={(e: any) => {
                        item.time = e;
                      }}
                    />
                  </div>

                  {/* 欢迎语 */}
                  <div className="w-full flex items-start">
                    <div className="w-full relative pl-0 rounded-sm flex justify-start items-start py-12 px-16">
                      <div className="w-full">
                        {/* 欢迎语1 */}
                        <div className="flex mb-24 flex-col">
                          <h4 className="w-60 min-w-60 text-right mr-8 mt-8 text-grey-600">
                            欢迎语1:
                          </h4>
                          <TextArea
                            placeholder="请输入回复内容"
                            value={item.text}
                            onChange={(e: any) => {
                              item.text = e;
                              setRender(Math.random() + 1);
                            }}
                            maxLength={600}
                          />
                        </div>
                        {/* 欢迎语2 */}
                        <div>
                          <h4 className="w-60 min-w-60 text-right mr-8 mt-8 text-grey-600">
                            欢迎语2:
                          </h4>
                          <div className="bg-white border-1 border-solid border-grey-200 p-16 pl-12">
                            <div className="flex items-center">
                              <p className="text-grey-600 mr-10 mb-0">选择消息类型</p>
                              <Radio.Group
                                onChange={(e: any) => {
                                  setMessageType(e.target.value);
                                }}
                                defaultValue={messageType}>
                                <Radio className="mr-0" value={1}>
                                  图片
                                </Radio>
                                <Radio className="mr-0" value={2}>
                                  链接
                                </Radio>
                                <Radio className="mr-0" value={3}>
                                  小程序
                                </Radio>
                                <Radio className="mr-0" value={4}>
                                  自定义菜单
                                </Radio>
                                <Radio className="mr-0" value={5}>
                                  抽奖活动
                                </Radio>
                              </Radio.Group>
                            </div>
                            {/* 图片选择 */}
                            <div className="relative w-128 h-128 mt-10">
                              <Upload
                                name="avatar"
                                showUploadList={false}
                                listType="picture-card"
                                beforeUpload={() => {
                                  return false;
                                }}
                                onChange={(info: any) => {
                                  getBase64(info.file, (url: any) => {
                                    item.img = url;
                                    setRender(Math.random() + 1);
                                  });
                                }}>
                                <UploadButton url={item.img} loading={loading} />
                              </Upload>
                              <i
                                className="iconfont icon-cuo absolute top-0 ring-0 transform -translate-x-1/2 -translate-y-1/2 cursor-pointer text-grey-300"
                                onClick={() => {
                                  item.img = "";
                                  setLading(false);
                                  setRender(Math.random() + 1);
                                }}></i>
                            </div>
                          </div>
                        </div>
                      </div>
                      {/* 欢迎语预览 */}
                      <div className="absolute -right-300 -top-54 w-280 h-530">
                        <PhoneView text={item.text} image={item.img} />
                      </div>
                    </div>
                  </div>
                </div>
                {/* 删除按钮 */}
                {welcomeMesTime.length > 1 ? (
                  <div
                    className="cursor-pointer absolute -right-38 bottom-0 w-20 h20 bg-grey-200 rounded-2 flex items-center justify-center"
                    onClick={() => {
                      welcomeMesTime.splice(index, 1);
                      setRender(Math.random() + 1);
                    }}>
                    <i className="iconfont icon-shanchu1"></i>
                  </div>
                ) : null}
              </div>
              <div className="w-280 h-530"></div>
            </div>
          );
        })}
      {/* 添加周期 */}
      <span
        onClick={addAutoWork}
        className={` ${
          cronWelcomeEnable
            ? "text-blue-default leading-5 ml-110 cursor-pointer flex items-center"
            : "text-blue-default leading-5 ml-110 cursor-pointer flex items-center none"
        }`}>
        <PlusCircleOutlined /> 添加分时段欢迎语
      </span>
    </div>
  );
};

export default WelcomeSetTime;
